﻿<div>
    <style>
        .Gutter-box {
            background: #00a0e9;
            padding: 5px 0;
        }
    </style>
    <Divider Orientation="left" Style="color: #333; font-weight:normal">
        Horizontal
    </Divider>

    <div class="Gutter-example">
        <Row Gutter="16">
            <Col class="Gutter-row" Span="6">
                <div >col-6</div>
            </Col>
            <Col class="Gutter-row" Span="6">
                <div >col-6</div>
            </Col>
            <Col class="Gutter-row" Span="6">
                <div >col-6</div>
            </Col>
            <Col class="Gutter-row" Span="6">
                <div >col-6</div>
            </Col>
        </Row>
    </div>
    <Divider Orientation="left" Style="color: #333; font-weight:normal">
        Responsive
    </Divider>
    <div class="Gutter-example">
        <Row Gutter="@Gutter1">
            <Col class="Gutter-row" Span="6">
                <div >col-6</div>
            </Col>
            <Col class="Gutter-row" Span="6">
                <div >col-6</div>
            </Col>
            <Col class="Gutter-row" Span="6">
                <div >col-6</div>
            </Col>
            <Col class="Gutter-row" Span="6">
                <div>col-6</div>
            </Col>
        </Row>
    </div>
    <Divider Orientation="left" Style="color: #333; font-weight:normal">
        Vertical
    </Divider>
    <div class="Gutter-example">
        <Row Gutter="(8,24)">
            <Col class="Gutter-row" Span="6">
                <div >col-6</div>
            </Col>
            <Col class="Gutter-row" Span="6">
                <div >col-6</div>
            </Col>
            <Col class="Gutter-row" Span="6">
                <div >col-6</div>
            </Col>
            <Col class="Gutter-row" Span="6">
                <div >col-6</div>
            </Col>
            <Col class="Gutter-row" Span="6">
                <div >col-6</div>
            </Col>
            <Col class="Gutter-row" Span="6">
                <div >col-6</div>
            </Col>
            <Col class="Gutter-row" Span="6">
                <div >col-6</div>
            </Col>
            <Col class="Gutter-row" Span="6">
                <div >col-6</div>
            </Col>
        </Row>
    </div>
</div>
@code{
    Dictionary<string, int> Gutter1 = new Dictionary<string, int>()
    {
        ["xs"] = 8,
        ["sm"] = 16,
        ["md"] = 24,
        ["lg"] = 32,
        ["xl"] = 48,
        ["xxl"] = 64
    };
   

}